<template>
  <!-- 初始化信息对话框 -->
  <el-dialog v-dialogDrag :close-on-click-modal="false" class="dialogStyleMiddle" append-to-body :lock-scroll="false" :title="dialogTitle" :visible.sync="dialogVisible">
    <el-form ref="dialogForm" :inline="true" :model="dialogFormData" label-width="110px">
      <el-row>
        <el-col :span="24" align="center"><div class="grid-content bg-purple">企业信息</div></el-col>
        <el-col :span="12">
          <el-form-item label="企业名称：">{{ dialogFormData.enterprise.name }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="到期时间：">{{ dialogFormData.enterprise.enterpriseExpiryTime }}</el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" align="center"><div class="grid-content bg-purple">部门编码信息</div></el-col>
        <el-col :span="12">
          <el-form-item label="英文名称："> {{ dialogFormData.sysDeptEncodingRule.name }} </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="编码名称：">{{ dialogFormData.sysDeptEncodingRule.caption }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="编码规则：">{{ dialogFormData.sysDeptEncodingRule.ruleValue }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="编码长度：">{{ dialogFormData.sysDeptEncodingRule.ruleLength }}</el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-col :span="24"><div class="grid-content bg-purple">部门管理员角色信息</div></el-col>
        </el-col>
        <el-col :span="12">
          <el-form-item label="角色名称：">{{ dialogFormData.deptRole.roleName }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="权限字符：">{{ dialogFormData.deptRole.roleKey }}</el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24"><div class="grid-content bg-purple">企业管理员角色信息</div></el-col>
        <el-col :span="12">
          <el-form-item label="角色名称：">{{ dialogFormData.role.roleName }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="权限字符：">{{ dialogFormData.role.roleKey }}</el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24"><div class="grid-content bg-purple">管理员信息</div></el-col>
        <el-col :span="12">
          <el-form-item label="用户名称：">{{ dialogFormData.sysUser.userName }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="登录账号：">{{ dialogFormData.sysUser.loginName }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="企业套餐：">{{ dialogFormData.sysCompanyTemp.name }}</el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24"><div class="grid-content bg-purple">数据权限</div></el-col>
        <el-col :span="24">
          <el-form-item label="菜单权限" class="el-tree-wrap">
            <p class="all-expand">
              <span v-if="AddExpand" @click="unFoldAll()"><i class="el-icon-caret-bottom" />全部展开</span>
              <span v-else @click="closeAll()"><i class="el-icon-caret-top" />全部关闭</span>
            </p>
            <div>
              <el-tree
                v-if="openOrNot"
                ref="menu"
                :data="menuOptions"
                show-checkbox
                node-key="id"
                empty-text="加载中，请稍后"
                :props="defaultProps"
                :default-expand-all="defaultExpand"
                :highlight-current="true"
                :render-content="renderContent"
                @check="handleChange"
              />
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <!-- <el-button v-btnClick  @click="dialogVisible = false">确 定</el-button> -->
      <el-button size="medium" @click="dialogVisible = false">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { selectByIdAndSubCompany, selectSysCompanyTempMenuIdsById } from '@/api/enterprise/everday'
// 菜单树
import { selectTreeMenu } from '@/api/system-tool/menu'
export default {
  name: 'Initalize',
  data() {
    return {
      // 树是否全部展开
      AddExpand: true,
      dialogVisible: false,
      dialogTitle: '',
      // 对话框表单数据
      dialogFormData: {
        deptRole: {},
        enterprise: {},
        enterpriseId: '',
        menu: [],
        role: {},
        subCompany: '',
        sysDept: {},
        sysDeptEncodingRule: {},
        sysUser: {},
        sysCompanyTemp: {}
      },
      defaultProps: {
        children: 'children',
        label: 'label',
        disabled: this.disabledFn
      },
      menuOptions: [],
      openOrNot: true,
      defaultExpand: false,
      // 选中的菜单树数据
      treeSelected: []
    }
  },
  methods: {
    // 全部展开
    unFoldAll() {
      this.treeSelected = this.$refs.menu.getCheckedKeys().concat(this.$refs.menu.getHalfCheckedKeys())
      this.AddExpand = false
      this.defaultExpand = true
      this.openOrNot = false
      setTimeout(() => {
        this.openOrNot = true
        this.$nextTick(() => {
          this.$refs.menu.setCheckedKeys(this.treeSelected)
        })
      }, 10)
    },
    // 全部关闭
    closeAll() {
      this.treeSelected = this.$refs.menu.getCheckedKeys().concat(this.$refs.menu.getHalfCheckedKeys())
      this.AddExpand = true
      this.defaultExpand = false
      this.openOrNot = false
      setTimeout(() => {
        this.openOrNot = true
        this.$nextTick(() => {
          this.$refs.menu.setCheckedKeys(this.treeSelected)
        })
      }, 10)
    },
    // 当选中的行数发生变化时
    handleChange(data, nodefunction) {
      this.checkIds(nodefunction.checkedNodes)
    },
    // 菜单树节点加载 设置菜单后面是否显示“数据权限”字样
    renderContent(h, { node, data, checked, store }) {
      // 判断菜单类型
      const menuType = data.menuType
      // 判断节点是否选中
      var isNodeCheck = false
      /** 当节点是选中状态时显示数据权限
       * 当节点是半选中状态时也显示数据权限
       */
      if (node.checked) {
        isNodeCheck = true
      } else {
        /** 获取次节点下面的子节点
         * 当子节点其中也有选择状态时设置isNodeCheck = true
         * 并且跳出循环
         */
        const childNodes = node.childNodes
        for (var i = 0; i < childNodes.length; i++) {
          if (childNodes[i].checked) {
            isNodeCheck = true
            break
          }
        }
      }
      /**
       * 当菜单类型为菜单（C）时 并且 次菜单是选中状态或者半选中状态
       * 则显示“数据权限”字样
       */
      if (menuType === 'C' && isNodeCheck) {
        return (
          <span class='custom-tree-node'>
            <span>{node.label}</span>
            <span style='margin-left:20px'>
              <el-button
                size='mini'
                type='text'
                on-click={() => this.append(data, event)}
              >
        数据权限
              </el-button>
            </span>
          </span>
        )
      } else {
        return (
          <span class='custom-tree-node'>
            <span>{node.label}</span>
          </span>
        )
      }
    },
    initalizeAdd(enterpriseId, subCompanyId) {
      this.dialogTitle = '初始化信息'
      this.dialogVisible = true
      this.initialize(enterpriseId, subCompanyId)
    },
    initialize(enterpriseId, subCompanyId) {
      this.resetForm('dialogForm')
      selectByIdAndSubCompany(enterpriseId, subCompanyId).then(resp => {
        if (resp) {
          this.$refs.menu.setCheckedKeys([])
          this.dialogFormData.deptRole = resp.data.deptRole
          this.dialogFormData.enterprise = resp.data.enterprise
          this.dialogFormData.enterpriseId = resp.data.enterpriseId
          this.dialogFormData.menu = resp.data.menu
          this.dialogFormData.role = resp.data.role
          this.dialogFormData.subCompany = resp.data.subCompany
          this.dialogFormData.sysDept = resp.data.sysDept
          this.dialogFormData.sysDeptEncodingRule = resp.data.sysDeptEncodingRule
          this.dialogFormData.sysUser = resp.data.sysUser
          this.dialogFormData.sysCompanyTemp = resp.data.enterprise.sysCompanyTemp
          this.selectMenuIdsbyId(this.dialogFormData.sysCompanyTemp.id)
        }
      })
      this.getMenuTreeData()
    },
    // 树形菜单加载
    getMenuTreeData() {
      const _this = this
      selectTreeMenu().then(resp => {
        if (resp) {
          _this.menuOptions = resp.data
        }
      })
    },
    // 菜单树禁用
    disabledFn(data) {
      // console.log('disabled函数: ', data, node);
      if (data !== null) {
        // 根据自己的节点数据条件设置判断，我只提供了个参考
        return true
      } else {
        return false
      }
    },
    // 根据企业套餐id查询菜单树menuIds[]
    selectMenuIdsbyId(id) {
      selectSysCompanyTempMenuIdsById(id).then(resp => {
        if (resp) {
          var menuIds = resp.data
          this.$refs.menu.setCheckedKeys(menuIds)
        }
      })
    }
  }
}
</script>

<style>

</style>
